<template xmlns="http://www.w3.org/1999/html" xmlns:font-family="http://www.w3.org/1999/xhtml">
  <div style="width: 100%; background-color: #ebeeea">
    <div style="width: 100%">
      <el-container>
        <!-- 导航栏 -->
        <el-header style="height: 80px; width: 100%">
          <div style="width: 100%; height: 100%">
            <!-- logo -->
            <div style="width: 10%; height: 100%; float: left">
              <img
                src="../assets/img/LOGO.png"
                style="width: 120px; height: 100%; margin-top: 2px"
              />
            </div>

            <!-- 公司注册 -->
            <div style="width: 5%; height: 100%; float: left; margin-top: 18px">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f5f5f5"
              >
                <el-menu-item index="1" @click="apply('RegisterComapny')">
                  公司注册
                </el-menu-item>
              </el-menu>
            </div>

            <!-- 工作室注册 -->
            <div
              style="
                width: 5%;
                height: 100%;
                float: left;
                margin-left: 1%;
                margin-top: 18px;
              "
            >
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f5f5f5"
              >
                <el-menu-item index="2" @click="apply('RegisterWorkroom')">
                  工作室注册
                </el-menu-item>
              </el-menu>
            </div>

            <!-- 搜索框 -->
            <div style="width: 45%; height: 100%; float: left">
              <div style="margin-top: 15px; width: 70%; margin-left: 20%">
                <el-input
                  placeholder="请输入内容"
                  v-model="input5"
                  class="input-with-select"
                  @keyup.enter.native="searchh"
                >
                  <el-select
                    v-model="select"
                    slot="prepend"
                    placeholder="请选择"
                  >
                    <el-option label="项目" value="1"></el-option>
                    <el-option label="工作室" value="2"></el-option>
                  </el-select>
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    style="background-color: #409eff"
                    @click="searchh()"
                  ></el-button>
                </el-input>
              </div>
            </div>

            <!-- 登录状态 -->
            <div
              style="width: 10%; height: 100%; float: left; margin-top: 18px"
            >
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f5f5f5"
              >
                <!-- 已登录 -->
                <el-submenu index="2" v-if="login">
                  <template slot="title"
                    ><el-avatar :src="circleUrl"></el-avatar
                    >{{ user.username }}</template
                  >

                  <el-menu-item index="2-1">{{ user.username }}</el-menu-item>
                  <el-menu-item
                    index="2-2"
                    v-if="user.role === 'workroom'"
                    @click="getBidding()"
                    >投标情况</el-menu-item
                  >
                  <el-menu-item
                    index="2-2"
                    v-if="user.role === 'company'"
                    @click="getBiddingByCompany()"
                    >招标情况</el-menu-item
                  >
                  <el-menu-item index="2-3" @click="loginOut"
                    >退出登录</el-menu-item
                  >
                </el-submenu>

                <!-- 未登录 -->
                <el-menu-item
                  index="2"
                  v-if="login === false"
                  @click="jump('Register')"
                >
                  注册/登陆
                </el-menu-item>
              </el-menu>
            </div>

            <!-- 公司用户展示发布需求模块 -->
            <div
              style="width: 20%; height: 100%; float: left"
              v-if="user.role === 'company'"
            >
              <!-- 发布需求 -->
              <div
                style="width: 50%; height: 100%; float: left; margin-top: 15px"
              >
                <el-button type="primary" @click="release()"
                  >免费发布需求</el-button
                >
                <el-dialog
                  title="发布需求"
                  :visible.sync="releaseDialogFormVisible"
                >
                  <el-form :model="demand">
                    <el-form-item label="我需要(属性标签)">
                      <el-input
                        v-model="demand.lable"
                        autocomplete="off"
                        placeholder="微信小程序,java"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="预算金额">
                      <el-input
                        v-model="demand.money"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <el-input
                        v-model="demand.phone"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="具体需求">
                      <el-input
                        v-model="demand.description"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="releaseReq"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </div>

              <!-- 寻找官方推荐 -->
              <div
                style="width: 50%; height: 100%; float: left; margin-top: 15px"
              >
                <el-button type="primary" @click="dialogFormVisible = true"
                  >免费找官方推荐</el-button
                >
                <el-dialog title="找官方推荐" :visible.sync="dialogFormVisible">
                  <div style="margin-top: 20px">
                    <el-checkbox
                      v-model="checked1"
                      label="JAVA"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked2"
                      label="C#"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked3"
                      label="PHP"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked4"
                      label="VUE"
                      border
                      size="medium"
                    ></el-checkbox>
                  </div>
                  <div style="margin-top: 20px">
                    <el-checkbox
                      v-model="checked5"
                      label="HTML"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked6"
                      label="JS"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked7"
                      label="微信小程序"
                      border
                      size="medium"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checked8"
                      label="微信公众号"
                      border
                      size="medium"
                    ></el-checkbox>
                  </div>
                  <el-form :model="demand">
                    <el-form-item label="预算金额">
                      <el-input
                        v-model="demand.money"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <el-input
                        v-model="demand.phone"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="releaseReq"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
        </el-header>

        <!-- 前端后端和轮播图 -->
        <div style="width: 80%; margin-left: 10%; height: 300px">
          <el-container style="height: 100%">
            <!-- 前端 -->
            <el-aside style="width: 20%; height: 100%">
              <div style="width: 100%; height: 100%">
                <el-menu
                  default-active="1-4-1"
                  class="el-menu-vertical-demo"
                  style="width: 99%; height: 100%"
                  @open="handleOpen"
                  @close="handleClose"
                  :collapse="isCollapse"
                  unique-opened="true"
                >
                  <el-menu-item
                    index="1"
                    style="height: 24%"
                    :key="user"
                    @click="search('前端', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >前端</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="2"
                    style="height: 24%"
                    :key="user"
                    @click="search('安卓端', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >安卓端</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="3"
                    style="height: 24%"
                    :key="user"
                    @click="search('iOS端', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >iOS端</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="4"
                    style="height: 23%"
                    :key="user"
                    @click="search('微信小程序', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >微信小程序</i
                    >
                  </el-menu-item>
                </el-menu>
              </div>
            </el-aside>
            <el-main>
              <!-- 广告 -->
              <div style="width: 100%">
                <el-carousel
                  :interval="5000"
                  arrow="hover"
                  indicator-position="none"
                  style="width: 100%; height: 100%"
                >
                  <el-carousel-item v-for="item in dataimg" :key="item">
                    <div @click="jumpp(item.role, item.aid)">
                      <img :src="item.src" style="width: 100%; height: 100%" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-main>
            <!-- 后端 -->
            <el-aside style="width: 20%">
              <div style="width: 100%">
                <el-menu
                  default-active="1-4-1"
                  class="el-menu-vertical-demo"
                  style="width: 99%; height: 300px"
                  @open="handleOpen"
                  @close="handleClose"
                  :collapse="isCollapse"
                  unique-opened="true"
                >
                  <el-menu-item
                    index="1"
                    style="height: 24%"
                    :key="user"
                    @click="search('JAVA', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >JAVA</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="2"
                    style="height: 24%"
                    :key="user"
                    @click="search('python', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >python</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="3"
                    style="height: 24%"
                    :key="user"
                    @click="search('c++', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >c++</i
                    >
                  </el-menu-item>

                  <el-menu-item
                    index="4"
                    style="height: 23%"
                    :key="user"
                    @click="search('c#', user.role)"
                  >
                    <i
                      style="
                        font-family: 'Microsoft YaHei';
                        font-style: normal;
                        font-size: 26px;
                      "
                      >c#</i
                    >
                  </el-menu-item>
                </el-menu>
              </div>
            </el-aside>
          </el-container>
        </div>

        <el-container>
          <el-header style="height: 500px; background-color: #ebeeea">
            <!-- 工作室推荐  -->
            <div>
              <div style="height: 60px">
                <p
                  style="
                    color: black;
                    font-size: 23px;
                    line-height: 23px;
                    font-weight: bold;
                    height: 40px;
                  "
                >
                  -- 工作室推荐 --
                </p>
              </div>

              <div
                v-for="table in tableData"
                style="height: 400px; width: 25%; float: left"
              >
                <div
                  style="
                    width: 90%;
                    height: 100%;
                    margin-left: 20px;
                    background-color: #ffffff;
                  "
                >
                  <img
                    :src="table.url"
                    class="image"
                    style="height: 300px; width: 100%"
                  />
                  <p style="color: black; line-height: 10px">
                    工作室名：{{ table.name }}
                  </p>
                  <p style="color: black; line-height: 15px; width: 250px">
                    工作室属性： {{ table.lable }}
                  </p>
                </div>
              </div>
            </div>
          </el-header>
        </el-container>
      </el-container>
    </div>
  </div>
</template>





<script>
export default {
  data() {
    return {
      circleUrl: "", //登录头像
      login: false, //登录状态
      user: {}, //当前登录用户

      //八个多选框
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      checked6: false,
      checked7: false,
      checked8: false,
      radio1: "上海",
      // 需求
      demand: {
        lable: "",
        money: 0,
        phone: "",
        status: 0,
        description: "",
      },
      releaseDialogFormVisible: false,
      dialogFormVisible: false,
      leirong: "",
      panduan: "",
      role1: "",
      role2: "",
      role3: "",
      role4: "",
      isCollapse: true,
      input: "",
      value4: true,
      input5: "",
      select: "",
      //轮播图
      dataimg: [
        {
          src: "",
          aid: "",
          role: "",
        },
      ],
      tableData: [{ id: "", name: "", url: "", lable: "" }], //用于工作室推荐
      tableData1: [{ lable: "", money: "", status: "", description: "" }], //用于项目推荐
      ldata: [],
      sdata: [],
      imgData: [{ id: "", url: "", lable: "" }],
    };
  },
  //初始化
  mounted: function () {
    //项目推荐，要给tableData1赋值
    axios.get("http://localhost:8092/user/RecProject", {}).then((response) => {
      let res = [];
      for (let i = 0; i < response.data.length; i++) {
        let tmp = {};
        tmp.lable = response.data[i].lable;
        tmp.money = response.data[i].money;
        tmp.status = response.data[i].status;
        tmp.description = response.data[i].description;
        res[i] = tmp;
      }
      this.tableData1 = res;
      console.log("tableData1", this.tableData1);
    });

    //工作室推荐，要给tableData赋值
    axios
      .get("http://localhost:88/provider/user/RecWorkroom", {})
      .then((response) => {
        let res = [];
        for (let i = 0; i < response.data.length; i++) {
          let tmp = {};
          tmp.id = response.data[i].id;
          tmp.name = response.data[i].workroomName;
          tmp.url = response.data[i].photoUrl;
          tmp.lable = response.data[i].lable;
          res[i] = tmp;
        }
        this.tableData = res;
      });

    //取到登录用户，r是用户id，ff是当前用户角色
    var user = JSON.parse(window.sessionStorage.getItem("user"));
    let r;
    let ff;
    if (user != null) {
      r = user.id;
      ff = user.role;
      this.user.id = user.id;
      this.user.role = user.role;
      this.user.username = user.userName;
      //获取登陆状态和头像
      this.login = true;
      this.circleUrl = user.photoUrl;

      //取出公司id
      if (user.role === "company") {
        axios
          .get("http://localhost:88/provider/user/searchByIdd", {
            params: { idd: user.id },
          })
          .then((response) => {
            this.user.rid = response.data.id;
          });
      }

      //取出工作室id
      if (user.role === "workroom") {
        axios
          .get("http://localhost:88/provider/workroom/searchByIdd", {
            params: { idd: user.id },
          })
          .then((response) => {
            this.user.rid = response.data.id;
          });
      }
    }

    //广告栏展示
    axios.get("http://localhost:88/provider/ad/findAding").then((response) => {
      if (response.data != null) {
        // 取到的那個數組
        var e = response.data;
        var data = [];
        for (var c = 0; c < e.length; c++) {
          var ee = e[c];
          var obj = {};
          obj.aid = ee.aid;
          obj.role = ee.role;
          obj.src = ee.photo;
          data[c] = obj;
        }
        console.log("data=", data);
        this.dataimg = data;
      } else {
      }
    });

    if (ff == "user") {
      this.panduan = true;
    } else {
      this.panduan = false;
    }
  },
  methods: {
    //根据id获得公司招标情况
    getBiddingByCompany() {
      this.$router.replace("/ProjectManage");
    },

    //根据id获得工作室投标情况
    getBidding() {
      this.$router.replace("/ApplyingProject");
    },

    //申请注册公司/工作室
    apply(path) {
      if (
        this.user.role != "user" &&
        this.user.role != "workroom" &&
        this.user.role != "company"
      ) {
        this.$router.replace("/Login");
      } else if (this.user.role === "user") {
        this.$router.replace({ path: path });
      } else {
        this.$message({
          message: "您的账号已拥有角色，不能再注册了哦~",
          type: "warning",
        });
      }
    },

    //退出登录
    loginOut() {
      this.login = false;
      this.user = {};
      sessionStorage.clear();
    },

    // 发布需求
    release() {
      this.releaseDialogFormVisible = true;
    },

    // 发布需求确定
    releaseReq() {
      axios
        .post("http://localhost:88/provider/user/releaseReq", {
          lable: this.demand.lable,
          money: this.demand.money,
          phone: this.demand.phone,
          description: this.demand.description,
          companyId: this.user.rid,
        })
        .then((response) => {
          this.$message({
            message: "需求发布成功",
            type: "success",
          });
        });
      this.releaseDialogFormVisible = false;
    },

    jump(path) {
      this.$router.replace({ path: path });
    },

    jumpp(role, id) {
      if (role == "项目") {
        this.$router.push({
          path: "/Project",
          query: {
            mallCode: id,
          },
        });
      }
      if (role == "工作室") {
        this.$router.push({
          path: "/Workroom",
          query: {
            mallCode: id,
          },
        });
      }
    },

    //搜索信息跳转
    search(index, role) {
      let type = "";
      if (role == "workroom") {
        type = "项目";
      }
      else if (role == "company") {
        type = "工作室"
      }
      this.$router.push({
        path: "/Search",
        query: {
          mallCode: index, //搜索关键词
          type: type
        },
      });
    },

    //搜索栏搜索
    searchh() {
      let user = JSON.parse(window.sessionStorage.getItem("user"));
      if (user == null) {
        this.$message({
          message: "请先登录~",
          type: "warning",
        });
      } else {
        let type = "";
        if (this.select == "1") {
          type = "项目";
        } else if (this.select == "2") {
          type = "工作室";
        }
        if (type == "") {
          this.$message({
            message: "请选择搜索类型~",
            type: "warning",
          });
        } else {
          this.$router.push({
            path: "/Search",
            query: {
              mallCode: this.input5, //搜索内容
              type: type, //类型
            },
          });
        }
      }
    },

    //不同角色后台管理系统的跳转
    Home() {
      var user = JSON.parse(window.sessionStorage.getItem("user"));
      if (user == null || user == "") {
        this.$router.replace("/Login");
      } else {
        var role = user.role;
        console.log(role);

        if (role === "admin") {
          this.$router.replace("/AdminHome");
        } else if (role === "worker") {
          this.$router.replace("/WorkerHome");
        } else {
          this.$router.replace("/Home");
        }
      }
    },
  },
};
</script>




<style scoped>
.item {
  margin-top: 0px;
  margin-right: 10px;
}
.el-header,
.el-footer {
  background-color: whitesmoke;
  color: #fff;
  text-align: center;
  line-height: 60px;
  border-right: 1px;
  border-color: royalblue;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: 300px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
body > .el-container {
  margin-bottom: 10px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
}
</style>
